<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .boss {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        .menu li {
            width: 25%;
            text-align: center;
            float: left;
            list-style: none;
        }

        .yin {
            display: none;
        }
    </style>
</head>

<body>
    <div class="boss">
        <ul class="menu">
            <li>11
                <div class="yin">111111</div>
            </li>
            <li>22
                <div class="yin">22222</div>
            </li>
            <li>33
                <div class="yin">3333333</div>
            </li>
            <li>44
                <div class="yin">4444444</div>
            </li>
        </ul>
    </div>
    <script>
        // tab栏
        //获取menu栏
        //设置鼠标事件
        //经过显示隐藏的box
        const menu = document.querySelector('.menu');
        const lis = document.querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                console.log(this);
                console.log(this.children[0]);
                for (let q = 0; q < lis.length; q++) {
                    this.parentElement.children[q].children[0].style.display = 'none';
                }
                console.log(this.parentElement.children);
                this.children[0].style.display = 'block';

            })
        }

    </script>
</body>

</html>